<!-- 案件详情——定时跟进表单 -->
<template>
	<div class="form-title">
		<span>定时跟进</span>
	</div>
	<a-form ref="traceFormRef" :model="formData" :rules="traceFormRules">
		<a-form-item label="客户姓名" name="traceName">
			<a-input v-model:value="formData.traceName" placeholder="请填写被跟进人" :disabled="true" />
		</a-form-item>
		<a-form-item label="提醒时间" name="nextTraceTime">
			<a-date-picker
				v-model:value="formData.nextTraceTime"
				:show-time="{ format: 'HH:mm' }"
				placeholder="请选择提醒时间"
				format="YYYY-MM-DD HH:mm"
				valueFormat="YYYY-MM-DD HH:mm:ss"
				class="date-picker"
				@change="onChange"
			/>
		</a-form-item>
		<a-form-item label="提醒内容" name="traceRemark">
			<a-textarea
				v-model:value="formData.traceRemark"
				placeholder="请输入提醒内容"
				:auto-size="{ minRows: 2, maxRows: 5 }"
			/>
		</a-form-item>
		<a-form-item>
			<a-button class="xn-mr8" type="primary" @click="onSubmit" :loading="buttonLoading">保存</a-button>
			<a-button @click="onReset">重置</a-button>
		</a-form-item>
	</a-form>
</template>
<script setup name="timingFollow">
	import timingTraceApi from '@/api/tjzy/timingTrace/timingTraceApi.js'
	import { message } from 'ant-design-vue'
	import { useRoute } from 'vue-router'
	const $route = useRoute()
	const props = defineProps({
		liaisonSelf: { type: Object, default: () => {} },
		editLiaisonSelf: { type: Object, default: () => {} }
	})
	const isEditLiaison = ref(false) //是否来自定时跟进修改引发的编辑操作
	watch(
		() => props.liaisonSelf,
		(newVal) => {
			if (newVal) {
				formData.value.traceName = newVal.liaisonName
			}
		}
	)
	watch(
		() => props.editLiaisonSelf,
		(newVal) => {
			if (newVal) {
				isEditLiaison.value = true
				formData.value.nextTraceTime = newVal.nextTraceTime
				formData.value.traceRemark = newVal.traceRemark
			}
		}
	)
	const emit = defineEmits({ isRefreshTimingTrace: Boolean })
	let formData = ref({
		caseId: undefined,
		traceUser: undefined,
		traceName: '',
		nextTraceTime: '',
		traceRemark: '',
		cleanLoanAmount: undefined
	})
	let traceFormRef = ref()
	let traceFormRules = ref({
		traceName: [
			{
				required: true,
				message: '请输入被跟进人',
				trigger: 'blur'
			}
		],
		nextTraceTime: [
			{
				required: true,
				message: '请选择提醒时间',
				trigger: 'change'
			}
		],
		traceRemark: [
			{
				required: true,
				message: '提醒内容',
				trigger: 'blur'
			}
		]
	})
	let buttonLoading = ref(false)
	const onSubmit = () => {
		traceFormRef.value
			.validate()
			.then(() => {
				// buttonLoading.value = true
				//新增跟进记录
				if (!isEditLiaison.value) {
					formData.value.caseId = $route.query.caseId
					formData.value.traceUser = props.liaisonSelf.id
					formData.value.cleanLoanAmount = props.liaisonSelf.cleanLoanAmount
					return timingTraceApi
						.addTracePlan(formData.value)
						.then((res) => {
							buttonLoading.value = false
							onReset()
							emit('isRefreshTimingTrace', true)
						})
						.catch((error) => {
							buttonLoading.value = false
						})
				} else {
					// 修改跟进记录
					const data = {
						id: props.editLiaisonSelf.id,
						nextTraceTime: formData.value.nextTraceTime,
						traceRemark: formData.value.traceRemark,
					}
					return timingTraceApi
						.editTracePlan(data)
						.then((res) => {
							buttonLoading.value = false
							onReset()
							isEditLiaison.value = false
							emit('isRefreshTimingTrace', true)
						})
						.catch((error) => {
							buttonLoading.value = false
						})
				}
			})
			.catch((error) => {
				message.error('表单校验失败，请重新核对表单信息')
			})
	}

	const onReset = () => {
		traceFormRef.value.resetFields()
		formData.value.traceName = props.liaisonSelf.liaisonName
		isEditLiaison.value = false
	}
</script>
<style lang="less" scoped>
	.date-picker {
		width: 100%;
	}
</style>
